<template>
  <div class="videos-cate-wrap">
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="loading"/>

    <div v-show="!loading">
      <div class="cate-title">{{cateTitle}}</div>
      <video-item v-for="(item, index) in cateVideos" :key="index" :video-item="item"></video-item>
    </div>
  </div>
</template>
<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";

  import utils from "@/common/utils";

  import videoItem from "./videoItem.vue";


  @Component({
    components: {
      videoItem
    }
  })
  export default class VideoCate extends Vue {
    private loading: boolean = true; // 页面加载中

    private cateId: string = "";
    private cateTitle: string = "";
    private cateVideos: object[] = [];

    mounted() {
      this.cateId = this.$route.params.id;
      this.getCateList();
    }

    getCateList(id = this.cateId) {
      this.$api
        .get("/videoCategoryDetails", {id}, "baseUrl2")
        .then((res:any) => {
          if (res && res.length) {
            let result: object[] = [];
            res.forEach((item:object, index:number) => {
              try {
                const {cover, createTime, description, id, uid, playUrl, url, title, category} = item.data.content.data;
                if (index === 0) {
                  this.cateTitle = category;
                }
                result.push({
                  cover, description, id, uid, playUrl, url, title,
                  createTime: utils.formatDate(createTime)
                });

              } catch (e) {
                this.$toast("数据结构解析出错");
              }
            });
            this.cateVideos = result;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }

  }
</script>
<style lang="scss">
  .cate-title {
    color: #b81d1d;
    font-weight: bold;
    font-size: 20px;
    padding: 16px 16px;
  }
</style>


